<template>
  <div class="home">
    <div class="box left">
      <dv-border-box-1 class="box-1">
        <dv-capsule-chart :config="config1" />
      </dv-border-box-1>
      <dv-border-box-8>
         <dv-scroll-board :config="config2" />
      </dv-border-box-8>
       <dv-border-box-1 class="box-1">
          <dv-scroll-ranking-board :config="config3" />
      </dv-border-box-1>
    </div>
    <div class="box center">
      <dv-border-box-1>
          <dv-flyline-chart :config="config4" />
      </dv-border-box-1>
    </div>
    <div class="box right">
       <dv-border-box-1 class="box-1">
          <dv-scroll-ranking-board :config="config3" />
      </dv-border-box-1>
       <dv-border-box-8>
        <dv-conical-column-chart :config="config5"  />
      </dv-border-box-8>
        <dv-border-box-1 class="box-1">
        <dv-capsule-chart :config="config1" />
      </dv-border-box-1>
    </div>
  </div>
</template>

<script>
 import { config1,config2,config3,config4,config5 }  from '../AppStr/config.js';
 export default {
  data() {
    return {
        config1,
        config2,
        config3,
        config4,
        config5
    }
  },
}
</script> 
<style scoped>
*{
  margin: 0px;
  padding: 0px;
}
   .home{
     background-color: #01132C;
     display: flex;
     justify-content: space-between;
   }
   .home .center{
     width: 50%;
     height: 100vh;
   }
  .home .left ,.home .right{
    width: 25vw;
    height: 100vh;
  }
  .box-1,.dv-border-box-8{
    height: 33vh;
  }
  .dv-capsule-chart{
    height: 33vh;
    padding: 31px 27px;
  }
  .dv-scroll-board,.dv-scroll-ranking-board{
    width: 90%;
    height: 85%;
    padding: 15px;
    position: relative;
    left: 10px;
  }
  .dv-flyline-chart{
    width: 95%;
    height: 95%;
    position: relative;
    top: 32px;
    left: 24px;
  }
  .dv-conical-column-chart{
    width: 90%;
    height: 90%;
    position: relative;
    top: 18px;
    left: 28px;
  }
</style>
